<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/knockoutjs.js"></script>
</head>
<body>
	<h2>People</h2>
	<ul data-bind="foreach:people">
		<li>
			<div>
				<span data-bind="text:name"></span> has <span data-bind="text:children().length">&nbsp;</span> children:
				<a href="#" data-bind="click:addChild">Add child</a>
				<span class="renderTime" data-bind="visible: $root.showRenderTimes">
					(person rendered at <span data-bind="text:new Date().getSeconds()"></span>)
				</span>
			</div>
			<ul data-bind="foreach:children">
				<li>
					<span data-bind="text:$data"></span>
					<span class="renderTime" data-bind="visible:$root.showRenderTimes">
						(person rendered at <span data-bind="text:new Date().getSeconds()"></span>)
					</span>
				</li>
			</ul>
		</li>
	</ul>
	<label for=""> <input type="checkbox" data-bind="checked:showRenderTimes">Show render times</label>
</body>
<script>
	var Person = function(name,children){
		this.name = name;
		this.children=ko.observableArray(children);

		this.addChild = function(){
			this.children.push("New Child");
		}.bind(this);
	};

	var viewModel={
		people:[
			new Person("Annabelle",["Arnie","Anders","Apple"]),
			new Person("Bertie",["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
			new Person("Charles",["Cayenne","Cleopatra"])
		],
		showRenderTimes:ko.observable(false)
	};

	ko.applyBindings(viewModel);
</script>
</html>